<template>
  <div class="inventory-dashboard">
    <div class="dashboard-grid">
      <!-- 库存数量占比 -->
      <div class="dashboard-panel">
        <h3 class="panel-title">库存数量占比</h3>
        <div class="chart-container">
          <div class="donut-chart">
            <div class="chart-center">
              <div class="total-value">5235</div>
              <div class="total-label">总库存</div>
            </div>
            <svg class="donut-svg" viewBox="0 0 120 120">
              <circle
                v-for="(item, index) in quantityData"
                :key="index"
                :cx="60"
                :cy="60"
                :r="45"
                :stroke="item.color"
                :stroke-width="20"
                :stroke-dasharray="getDashArray(item.percentage)"
                :stroke-dashoffset="getDashOffset(index)"
                fill="none"
                transform="rotate(-90 60 60)"
              />
            </svg>
          </div>
          <div class="chart-legend">
            <div
              v-for="(item, index) in quantityData"
              :key="index"
              class="legend-item"
            >
              <div class="legend-color" :style="{ backgroundColor: item.color }"></div>
              <div class="legend-text">
                <span class="legend-name">{{ item.name }}</span>
                <span class="legend-value">{{ item.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 库存金额占比 -->
      <div class="dashboard-panel">
        <h3 class="panel-title">库存金额占比</h3>
        <div class="chart-container">
          <div class="donut-chart">
            <div class="chart-center">
              <div class="total-value">9235.00</div>
              <div class="total-label">总金额</div>
            </div>
            <svg class="donut-svg" viewBox="0 0 120 120">
              <circle
                v-for="(item, index) in valueData"
                :key="index"
                :cx="60"
                :cy="60"
                :r="45"
                :stroke="item.color"
                :stroke-width="20"
                :stroke-dasharray="getDashArray(item.percentage)"
                :stroke-dashoffset="getDashOffset(index)"
                fill="none"
                transform="rotate(-90 60 60)"
              />
            </svg>
          </div>
          <div class="chart-legend">
            <div
              v-for="(item, index) in valueData"
              :key="index"
              class="legend-item"
            >
              <div class="legend-color" :style="{ backgroundColor: item.color }"></div>
              <div class="legend-text">
                <span class="legend-name">{{ item.name }}</span>
                <span class="legend-value">{{ item.value.toFixed(2) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 入库统计 -->
      <div class="dashboard-panel">
        <h3 class="panel-title">入库统计</h3>
        <div class="time-selector">
          <button
            v-for="period in timePeriods"
            :key="period.value"
            :class="['time-btn', { active: selectedPeriod === period.value }]"
            @click="selectedPeriod = period.value"
          >
            {{ period.label }}
          </button>
        </div>
        <div class="chart-container">
          <div class="chart-wrapper">
            <div class="y-axis left-y">
              <span>数量</span>
            </div>
            <div class="chart-area">
              <div class="bar-chart">
                <div
                  v-for="(item, index) in inboundData"
                  :key="index"
                  class="bar-group"
                >
                  <div
                    class="bar quantity-bar"
                    :style="{ height: (item.quantity / 175) * 100 + '%' }"
                  ></div>
                  <div class="bar-label">{{ item.date }}</div>
                </div>
              </div>
              <div class="line-chart">
                <svg class="line-svg" viewBox="0 0 280 100">
                  <polyline
                    :points="getLinePoints(inboundData, 'amount')"
                    fill="none"
                    stroke="#67C23A"
                    stroke-width="2"
                  />
                </svg>
              </div>
            </div>
            <div class="y-axis right-y">
              <span>金额</span>
            </div>
          </div>
          <div class="chart-legend">
            <div class="legend-item">
              <div class="legend-color" style="background-color: #409EFF"></div>
              <span>数量</span>
            </div>
            <div class="legend-item">
              <div class="legend-color" style="background-color: #67C23A"></div>
              <span>金额</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 出库统计 -->
      <div class="dashboard-panel">
        <h3 class="panel-title">出库统计</h3>
        <div class="time-selector">
          <button
            v-for="period in timePeriods"
            :key="period.value"
            :class="['time-btn', { active: selectedPeriod === period.value }]"
            @click="selectedPeriod = period.value"
          >
            {{ period.label }}
          </button>
        </div>
        <div class="chart-container">
          <div class="chart-wrapper">
            <div class="y-axis left-y">
              <span>数量</span>
            </div>
            <div class="chart-area">
              <div class="bar-chart">
                <div
                  v-for="(item, index) in outboundData"
                  :key="index"
                  class="bar-group"
                >
                  <div
                    class="bar amount-bar"
                    :style="{ height: (item.quantity / 175) * 100 + '%' }"
                  ></div>
                  <div class="bar-label">{{ item.date }}</div>
                </div>
              </div>
              <div class="line-chart">
                <svg class="line-svg" viewBox="0 0 280 100">
                  <polyline
                    :points="getLinePoints(outboundData, 'amount')"
                    fill="none"
                    stroke="#67C23A"
                    stroke-width="2"
                  />
                </svg>
              </div>
            </div>
            <div class="y-axis right-y">
              <span>金额</span>
            </div>
          </div>
          <div class="chart-legend">
            <div class="legend-item">
              <div class="legend-color" style="background-color: #E6A23C"></div>
              <span>数量</span>
            </div>
            <div class="legend-item">
              <div class="legend-color" style="background-color: #67C23A"></div>
              <span>金额</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 时间周期选择器
const timePeriods = [
  { label: '最近7天', value: '7days' },
  { label: '最近30天', value: '30days' },
  { label: '最近一年', value: '1year' }
]

const selectedPeriod = ref('7days')

// 库存数量数据
const quantityData = ref([
  { name: '仓库一', value: 567, color: '#409EFF', percentage: 10.8 },
  { name: '仓库二', value: 678, color: '#9C27B0', percentage: 12.9 },
  { name: '仓库三', value: 456, color: '#FF9800', percentage: 8.7 },
  { name: '仓库四', value: 789, color: '#F44336', percentage: 15.1 },
  { name: '仓库五', value: 567, color: '#FFEB3B', percentage: 10.8 },
  { name: '仓库六', value: 345, color: '#4CAF50', percentage: 6.6 },
  { name: '仓库七', value: 678, color: '#00BCD4', percentage: 12.9 }
])

// 库存金额数据
const valueData = ref([
  { name: '仓库一', value: 539.00, color: '#409EFF', percentage: 5.8 },
  { name: '仓库二', value: 920.00, color: '#9C27B0', percentage: 10.0 },
  { name: '仓库三', value: 995.00, color: '#FF9800', percentage: 10.8 },
  { name: '仓库四', value: 687.00, color: '#F44336', percentage: 7.4 },
  { name: '仓库五', value: 178.00, color: '#FFEB3B', percentage: 1.9 },
  { name: '仓库六', value: 867.00, color: '#4CAF50', percentage: 9.4 },
  { name: '仓库七', value: 120.00, color: '#00BCD4', percentage: 1.3 }
])

// 入库数据
const inboundData = ref([
  { date: '08-01', quantity: 20, amount: 120 },
  { date: '08-02', quantity: 100, amount: 650 },
  { date: '08-03', quantity: 145, amount: 1150 },
  { date: '08-04', quantity: 105, amount: 850 },
  { date: '08-05', quantity: 60, amount: 550 },
  { date: '08-06', quantity: 115, amount: 850 },
  { date: '08-07', quantity: 100, amount: 750 }
])

// 出库数据
const outboundData = ref([
  { date: '08-01', quantity: 20, amount: 120 },
  { date: '08-02', quantity: 100, amount: 650 },
  { date: '08-03', quantity: 145, amount: 1150 },
  { date: '08-04', quantity: 105, amount: 850 },
  { date: '08-05', quantity: 60, amount: 550 },
  { date: '08-06', quantity: 115, amount: 850 },
  { date: '08-07', quantity: 100, amount: 750 }
])

// 计算环形图的dasharray
const getDashArray = (percentage: number) => {
  const circumference = 2 * Math.PI * 45
  const dashLength = (percentage / 100) * circumference
  return `${dashLength} ${circumference}`
}

// 计算环形图的dashoffset
const getDashOffset = (index: number) => {
  let offset = 0
  for (let i = 0; i < index; i++) {
    offset += (quantityData.value[i].percentage / 100) * 2 * Math.PI * 45
  }
  return offset
}

// 计算折线图的点坐标
const getLinePoints = (data: any[], field: string) => {
  const maxValue = field === 'amount' ? 1200 : 175
  return data.map((item, index) => {
    const x = (index / (data.length - 1)) * 280
    const y = 100 - ((item[field] / maxValue) * 100)
    return `${x},${y}`
  }).join(' ')
}
</script>

<style scoped>
.inventory-dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-panel {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.panel-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.chart-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 环形图样式 */
.donut-chart {
  position: relative;
  width: 120px;
  height: 120px;
}

.chart-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.total-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  line-height: 1;
}

.total-label {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.donut-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 图例样式 */
.chart-legend {
  flex: 1;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 8px;
}

.legend-text {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.legend-name {
  color: #606266;
}

.legend-value {
  color: #303133;
  font-weight: 500;
}

/* 时间选择器样式 */
.time-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.time-btn {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.time-btn:hover {
  border-color: #409eff;
}

.time-btn.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

/* 图表区域样式 */
.chart-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  height: 200px;
}

.y-axis {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  color: #909399;
  padding: 10px 0;
}

.left-y {
  transform: rotate(180deg);
}

.chart-area {
  flex: 1;
  position: relative;
  height: 100%;
}

.bar-chart {
  display: flex;
  align-items: end;
  justify-content: space-around;
  height: 100%;
  padding: 0 20px;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.bar {
  width: 20px;
  border-radius: 2px 2px 0 0;
  margin-bottom: 8px;
}

.quantity-bar {
  background-color: #409EFF;
}

.amount-bar {
  background-color: #E6A23C;
}

.bar-label {
  font-size: 10px;
  color: #909399;
  transform: rotate(-45deg);
}

.line-chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.line-svg {
  width: 100%;
  height: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  
  .chart-container {
    flex-direction: column;
    align-items: center;
  }
  
  .chart-legend {
    width: 100%;
  }
}
</style> 